import React from 'react';
import { FirstHeaderC, InfoTipsC, SecondHeaderC, PrimaryC } from '../../comps';
class InfoTip extends React.Component {
  constructor() {
    super();
    this.state = {
      interface: true,
      info: '',
    };
    setTimeout(() => {
      this.setState({
        interface: false,
        info: '异步消息',
      });
    }, 2000);
  }
  render() {
    return (
      <div style={{ padding: '20px' }}>
        <FirstHeaderC title='消息提示框' />
        <div>
          <div style={{ marginBottom: '20px' }}>
            <SecondHeaderC title='基本场景' />
            {/* 如果想要设置样式可以通过塞值reactNode的方式  style可以传可以不传*/}
            <InfoTipsC Left='消息提示框' style={{ paddingLeft: '20px', width: '100%' }}></InfoTipsC>
          </div>
          <div style={{ marginBottom: '20px' }}>
            <SecondHeaderC title='基本场景带右侧按钮并且左侧输入自己内置的内容' />
            {/* 如果想要设置样式可以通过塞值reactNode的方式  */}
            <InfoTipsC
              Left={<div style={{ paddingLeft: '20px' }}>这个是一个div的容器</div>}
              Right={<PrimaryC style={{ marginLeft: '20px' }} title='导出' />}
              RightBtn={true}
            ></InfoTipsC>
          </div>
          <div>
            <SecondHeaderC title='异步加载' />
            {/* 如果想要设置样式可以通过塞值reactNode的方式  */}
            <InfoTipsC Left={this.state.info} style={{ paddingLeft: '20px' }} tipLoading={this.state.interface}></InfoTipsC>
          </div>
        </div>
      </div>
    );
  }
}
export default InfoTip;
